<template>
	<view class="container">
		<view class="user-section-bg"></view>
		<view class="user-section">

			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatar || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username" @click="navToLogin">{{userInfo.nickname || userInfo.account || '去登陆' }}</text>
					<text class="department" v-if="hasLogin">会员信息：{{ userInfo.level_name }}</text>
				</view>
				<!-- #ifdef MP -->
				<text class="mallicon icon-shezhi" style="margin-top: -120rpx;" @click="navTo('/pages/setting/setting')"></text>
				<!-- #endif -->
			</view>
			<view class="tj-sction" v-if="hasLogin">
				<view class="tj-item" @click="navToYesTwo('/pages/user/balance',userInfo.is_merch)">
					<text class="num">{{userInfo.credit2}}</text>
					<text>余额</text>
				</view>
				<view class="tj-item" @click="navToYes('/pages/user/myPoints',1)">
					<text class="num">{{userInfo.credit1}}</text>
					<text>弘豆</text>
				</view>
			</view>
		</view>
		<view class="cover-container">
			<!-- 订单 -->
			<view class="history-section icon">
				<view class="sec-header"><text class="sec-header-t" @click="navTo('/pages/order/orderList?id=0')">我的订单</text></view>
				<view class="order-section">
					<view class="order-item" @click="navTo('/pages/order/orderList?id=1')" hover-class="common-hover" :hover-stay-time="50">
						<text class="mallicon icon-daifukuan"></text>
						<!-- <text class="mallicon" style='font-family:mallicon;'>&#xe620;</text> -->
						<!-- <image src="../../static/forPayment.png" style="width: 28rpx;height: 31rpx;"></image> -->
						<text class="order_num">{{orderBox.count_1}}</text>
						<text>待付款</text>
					</view>
					<view class="order-item" @click="navTo('/pages/order/orderList?id=2')" hover-class="common-hover" :hover-stay-time="50">
						<text class="mallicon icon-daifahuo"></text>
						<!-- <text class="mallicon" style='font-family:mallicon;'>&#xe621;</text> -->
						<text class="order_num">{{orderBox.count_2}}</text>
						<text>待发货</text>
					</view>
					<view class="order-item" @click="navTo('/pages/order/orderList?id=3')" hover-class="common-hover" :hover-stay-time="50">
						<text class="mallicon icon-daishouhuo"></text>
						<!-- <text class="mallicon" style='font-family:mallicon;'>&#xe622;</text> -->
						<text class="order_num">{{orderBox.count_3}}</text>
						<text>待收货</text>
					</view>
					<view class="order-item" @click="navTo('/pages/order/orderList?id=4')" hover-class="common-hover" :hover-stay-time="50">
						<text class="mallicon icon-yiwancheng"></text>
						<!-- <text class="mallicon" style='font-family:mallicon;'>&#xe623;</text> -->
						<text class="order_num">{{orderBox.count_4}}</text>
						<text>已完成</text>
					</view>
				</view>
			</view>
			<!-- 我的工具 -->
			<view class="history-section icon" v-if="hasLogin">
				<view class="sec-header"><text class="sec-header-t">我的工具</text></view>
				<view class="tools-section">
					<view class="tools-item" @click="navToYes('/pages/notice/promote',1)" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img">
							<image style="width: 72upx;height: 72upx;" src="/static/user/icon_05.png"></image>
						</view>
						<text>枝叶码</text>
					</view>
					<view class="tools-item" @click="navToYes('/pages/user/branchesLeaves',1)" hover-class="common-hover"
					 :hover-stay-time="50">
						<view class="item-img">
							<image style="width: 72upx;height: 72upx;" src="/static/user/icon_02.png"></image>
						</view>
						<text>我的枝叶</text>
					</view>
					<view class="tools-item" @click="navToYes('/pages/user/flowersFruits',1)" hover-class="common-hover"
					 :hover-stay-time="50">
						<view class="item-img">
							<image style="width: 72upx;height: 72upx;" src="/static/user/icon_01.png"></image>
						</view>
						<text>我的花果</text>
					</view>
					<view class="tools-item" @click="navToYes('/pages/notice/promoteTwo',userInfo.is_merch)" hover-class="common-hover"
					 :hover-stay-time="50">
						<view class="item-img">
							<image style="width: 72upx;height: 72upx;" src="/static/user/icon_04.png"></image>
						</view>
						<text>花果码</text>
					</view>
					<view class="tools-item" @click="navToYes('/pages/user/consumerDetails',1)" hover-class="common-hover"
					 :hover-stay-time="50">
						<view class="item-img">
							<image style="width: 72upx;height: 72upx;" src="/static/user/icon_07.png"></image>
						</view>
						<text>消费明细</text>
					</view>
					<view class="tools-item" @click="navToYes('/pages/address/address?AddressID=0',1)" hover-class="common-hover"
					 :hover-stay-time="50">
						<view class="item-img">
							<image style="width: 72upx;height: 72upx;" src="/static/user/icon_06.png"></image>
						</view>
						<text>收货地址</text>
					</view>
					<view v-if="userInfo.is_enterprise == 1" class="tools-item" @click="navToYes('/pages/company/company',1)" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 66upx;height: 66upx;" src="/static/user/bgblock_05.png"></image></view>
						<text>企业详情</text>
					</view>
					<view v-if="userInfo.is_enterprise != 1" class="tools-item"></view>
					<view class="tools-item"></view>
					<!-- <div class="order-section">
						<div class="order-item">
							<text class="mallicon" style='font-family:mallicon;'>&#xe631;</text>
							<text class="order-icon-title">退货/退款</text>
						</div>
					</div> -->
					
					
					
					
					
					
					
					
					<!-- <view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 66upx;height: 66upx;" src="/static/user/bgblock_05.png"></image></view>
						<text>我的奖励</text>
					</view>
					<view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 56upx;height: 74upx;" src="/static/user/bgblock_06.png"></image></view>
						<text>我的账单</text>
					</view> -->
					<!-- 		<view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 68upx;height: 66upx;" src="/static/user/bgblock_07.png"></image></view>
						<text>被拜访记录</text>
					</view> -->
					<!-- 	<view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 80upx;height: 70upx;" src="/static/user/bgblock_08.png"></image></view>
						<text>广告形象</text>
					</view> -->
					<!-- 		<view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 64upx;height: 70upx;" src="/static/user/bgblock_09.png"></image></view>
						<text>合同管理</text>
					</view> -->
					<!-- <view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 64upx;height: 64upx;" src="/static/user/bgblock_10.png"></image></view>
						<text>发票管理</text>
					</view> -->
					<!-- 		<view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 56upx;height: 66upx;" src="/static/user/bgblock_11.png"></image></view>
						<text>客户商品价格管理</text>
					</view> -->
					<!-- <view class="tools-item" @click="navToNo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-img"><image style="width: 72upx;height: 68upx;" src="/static/user/bgblock_12.png"></image></view>
						<text>我的卡券</text>
					</view>
					<view class="tools-item"></view>
					<view class="tools-item"></view>
					<view class="tools-item"></view>
					<view class="tools-item"></view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				moving: false,
				userInfo: {},
				orderBox: {}
			};
		},
		onLoad() {
			// this.getNews()
		},
		onShow() {
			this.isNoHasLogin()
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				});
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			navToLogin() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/login/login';
				}
				uni.navigateTo({
					url
				});
			},
			navToNo(url) {
				this.$utils.showMsg('敬请期待');
			},
			navToYes(url, num) {
				// 只有商家可以干
				console.log(4464568688)
				if (num == 1) {
					uni.navigateTo({
						url: url
					});
				} else {
					this.$utils.showMsg('非商家不能查看');
				}
			},
			navToYesTwo(url, num) {
				// 只有用户可以干
				if (num != 1) {
					uni.navigateTo({
						url: url
					});
				} else {
					this.$utils.showMsg('商家不能查看');
				}
			},
			// --------------------新--------------------
			// 获取用户信息
			getNews() {
				let that = this;
				console.log('this.hasLoginthis.hasLoginthis.hasLogin', this.hasLogin)
				that.$Request.post(that.$api.userNews.info).then(res => {
					console.log('获取用户信息', res)
					that.userInfo = res.data
				}, err => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					console.log("err: " + JSON.stringify(err));
				});
				// 获取各种订单数量
				that.$Request.post(that.$api.userNews.getOrderCount).then(res => {
					that.orderBox = res.data
					console.log('获取各种订单数量', that.orderBox)
				}, err => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					console.log("err: " + JSON.stringify(err));
				});
			},
			isNoHasLogin(){
				let that = this;
				if (!that.hasLogin) {
					uni.showModal({
					    title: '登录',
					    content: '登录后才可以查看用户信息',
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					            	url: '/pages/login/login'
					            });
					        } else if (res.cancel) {
					            uni.switchTab({
					            	url: '/pages/tabBar/home'
					            });
					        }
					    }
					});
				}else{
					that.userInfo = {}
					that.orderBox = {}
					that.getNews()
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #f5f5f5;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 360upx;
		padding: 0upx 30upx;
		margin: 0 30rpx;
		position: relative;
		// background-color: #ffffff;
		border-radius: 10rpx;
	}

	.user-section::after {
		// position: absolute;
		// bottom: -10rpx;
		// left: 0;
		// right: 0;
		// height: 5px;
		// background-color: #D22B19;
		// content: ' ';
		// border-bottom-left-radius: 50rpx;
		// border-bottom-right-radius: 50rpx;
	}

	.user-section-bg {
		width: 100%;
		position: absolute;
		height: 360upx;
		background-color: #D22B19;
		content: ' ';
		// border-bottom-left-radius: 30%;
		// border-bottom-right-radius: 30%;
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.info-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 500upx;
		}

		.username {
			font-size: $font-lg;
			color: #fff;
			margin-left: 20upx;
			/* margin-top: 40upx */
		}

		.department {
			font-size: $font-sm;
			color: #fff;
			margin-left: 20upx;
			line-height: 2.8;
		}

		.tag-phone {
			font-size: $font-sm;
			color: $font-color-base;
			margin-left: 10upx;
			margin-right: 20upx;
			padding: 8upx 15upx;
			text-align: center;
			color: #fff;
			border-radius: 20px;
			background: linear-gradient(left, #f96d73, #f3475c);
		}
	}

	.user_vip {
		margin: 0 30rpx;
		background: 'linear-gradient(to right,#F29221 0%,white 30%)'
	}

	.tj-sction {
		@extend %section;
		justify-content: space-between;
		margin-top: -30rpx;
		padding: 0 40rpx;
		background-color: rgba(255, 255, 255, 0);

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;

			text {
				color: #fff;
			}
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;



		margin-top: -60rpx;
		z-index: 6;
		border-radius: 40rpx 40rpx 0px 0px;
		overflow: hidden;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 10upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;

			.order_num {
				position: absolute;
				top: 0;
				right: 0;
				width: 35rpx;
				height: 35rpx;
				background: #D22B19;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				line-height: 35rpx;
				border-radius: 50%;
			}
		}

		.mallicon {
			font-size: 66upx;
			margin-bottom: 10upx;
			color: #8f9298;
		}

		.icon-yiwancheng {
			font-size: 62upx;
		}
	}

	.tools-section {
		@extend %section;
		padding: 28upx 0;
		width: 100%;
		flex-wrap: wrap;
		margin-top: -20upx;

		.tools-item {
			@extend %flex-center;
			margin-top: 50upx;
			width: 173.5upx;
			align-items: center;
			font-size: $font-sm;
			color: $font-color-dark;

			.item-img {
				@extend %flex-center;
				height: 80upx;
			}
		}

		text {
			@extend %flex-center;
			margin-top: 30upx;
			width: 173.5upx;
			white-space: nowrap;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.sec-header-t {
				font-size: $font-lg;
				color: $font-color-dark;
			}
		}
	}
</style>
